<template>
  <su-popup :show="modelValue" type="center" :round="20" show-close @close="hideModal">
    <view class="sms-modal ss-flex-col ss-col-center">
      <view class="sms-title ss-m-b-30"> 请输入验证码 </view>
      <view class="sms-message ss-m-b-40"> {{ smsMsg }} </view>
      <uv-code-input v-model="verify_code" :maxlength="6" @finish="finishVerify" />
      <view :class="['sms-btn', 'ss-m-t-40', { disabled: count > 0 }]" @click="sendSms">
        {{ btnText }}
      </view>
    </view>
  </su-popup>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import sheep from "@/sheep";

const props = defineProps({
  // 弹窗显示
  modelValue: {
    type: Boolean,
    default: false,
  },
  // 订单信息
  order: {
    type: Object,
    default: () => {
      return {
        order_sn: "", // 订单编号
        card_id: "", // 银行卡号
        card_name: "", // 姓名
        cert_id: "", // 身份证号
        card_mp: "", // 手机号码
        trans_id: "", // 交易流水号
        verify_code: "", // 验证码
      };
    },
  },
});
const emits = defineEmits(["update:modelValue", "confirm", "close"]);

const verify_code = ref(""); // 验证码
const timer = ref(null); // 定时器
const count = ref(0); // 倒计时

const btnText = computed(() => {
  return count.value ? `${count.value}s后可重发` : "重发验证码";
});

const smsMsg = computed(() => {
  const { card_mp } = props.order;
  if (!card_mp) return "未识别到手机号";
  let before = card_mp.slice(0, 3);
  let after = card_mp.slice(-4);
  return `验证码已发送至 +86 ${before}****${after}，请注意查收`;
});

watch(props, (val) => {
  if (val.modelValue) {
    count.value = 60;
    countDown();
  }
});

// 发送验证码
const sendSms = () => {
  if (count.value > 0) return;
  sheep.$api.pay.quickbuckleApply(props.order).then((res) => {
    count.value = 60;
    countDown();
  });
};

// 倒计时
const countDown = () => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  timer.value = setInterval(() => {
    count.value--;
    if (count.value === 0) {
      clearInterval(timer.value);
      timer.value = null;
    }
  }, 1000);
};

// 输入完成开始验证
const finishVerify = () => {
  let data = { ...props.order, verify_code: verify_code.value };
  sheep.$api.pay.quickbuckleConfirm(data).then((res) => {
    emits("update:modelValue", false);
    uni.showToast({
      title: "绑定成功",
      icon: "success",
      success: () => {
        setTimeout(() => {
          uni.navigateBack({ delta: 1 });
        }, 1500);
      },
    });
  });
};

// 关闭弹窗
const hideModal = () => {
  emits("update:modelValue", false);
  emits("close");
  count.value = 0;
  verify_code.value = "";
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
};
</script>

<style lang="scss" scoped>
.sms-modal {
  padding: 40rpx 40rpx 120rpx;
  max-width: 560rpx;
  .sms-title {
    font-size: 32rpx;
    color: #333;
    margin-top: 40rpx;
  }
  .sms-message {
    font-size: 28rpx;
    color: #999;
  }
  .sms-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(90deg, #ff9a44 0%, #ff5e20 100%);
    border-radius: 0 0 40rpx 40rpx;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
    &:active {
      opacity: 0.9;
    }
  }
  .disabled {
    color: #999;
    background: transparent;
    border-top: 1rpx solid #e6e6e6;
  }
}
:deep(.close-icon) {
  bottom: auto;
  left: auto;
  top: 20rpx;
  right: 0;
  color: #333 !important;
  font-size: 46rpx !important;
}
</style>
